import './ReadBar.css'
import React, { useState } from 'react';
import qq from '../../assets/img/qq.png';
import wb from '../../assets/img/wb.png';
import vc from '../../assets/img/vc.png';
import pyq from '../../assets/img/pyq.png';
import { Slider } from 'antd';
export default function ReadBar(props) {
    const [lightindex, setlightindex] = useState(0);
    const [conindex, setconindex] = useState(-1);
    const [share, setshare] = useState(false);
    function changeconindex(index) {
        if (conindex === index) {
            setconindex(-1);
        } else {
            setconindex(index);
        }
    }
    function changelight(index) {
        setlightindex(index);
        if (index === 0) {
            document.documentElement.className = "default";
        } else if (index === 1) {
            document.documentElement.className = "orange";
        } else if (index === 2) {
            document.documentElement.className = "protect";
        } else if (index === 3) {
            document.documentElement.className = "black";
        }
    }
    function changearti(index) {
        props.changeartindex(index);
        changeshare(false);
        props.setreadbarshow(false);
    }
    function changeshare(type) {
        setshare(type);
        setconindex(-1);
    }
    function onAfterChange(value) {
        props.setcontentfontsize(value);
    }
    function onAfterChangeline(value){
        props.setlineheight(value);
    }
    return (
        <div className={'readbarbox ' + (props.show ? "show" : "")}>
            <div className={"sharebg " + ((share || conindex === 0) ? "con" : "")} onClick={() => changeshare(false)}></div>
            <div className={"sharecontent " + (share ? "con" : "")}>
                <div className="shareminbox">
                    <div className="sharebutton">
                        <div className="iconbox">
                            <img src={vc} alt="" />
                        </div>
                    </div>
                    <p>分享到微信</p>
                </div>
                <div className="shareminbox">
                    <div className="sharebutton">
                        <div className="iconbox">
                            <img src={pyq} alt="" />
                        </div>
                    </div>
                    <p>分享到朋友圈</p>
                </div>
                <div className="shareminbox">
                    <div className="sharebutton">
                        <div className="iconbox">
                            <img src={wb} alt="" />
                        </div>
                    </div>
                    <p>分享到微博</p>
                </div>
                <div className="shareminbox">
                    <div className="sharebutton">
                        <div className="iconbox">
                            <img src={qq} alt="" />
                        </div>
                    </div>
                    <p>分享到QQ</p>
                </div>
            </div>
            <div className={"artlist " + (conindex === 0 ? "con" : "")}>
                <div className="listblankbox"></div>
                <div className="listtitle">
                    {props.booksitr.title}
                </div>
                <div className="listcontent">
                    {
                        props.artlist.map((ele, index) => (
                            <div className={"listminbox " + (props.artindex === index ? "con" : "")} onClick={() => changearti(index)} key={index}>
                                {ele.title}
                            </div>
                        ))
                    }


                </div>
            </div>
            <div className={"light " + ((conindex === 1) && (props.show) ? "con" : "")}>
                <div className={"lightbox " + (lightindex === 0 ? "con" : "")} onClick={() => changelight(0)}></div>
                <div className={"lightbox " + (lightindex === 1 ? "con" : "")} onClick={() => changelight(1)}></div>
                <div className={"lightbox " + (lightindex === 2 ? "con" : "")} onClick={() => changelight(2)}></div>
                <div className={"lightbox " + (lightindex === 3 ? "con" : "")} onClick={() => changelight(3)}></div>
            </div>
            <div className={"readtype " + ((conindex === 2) && (props.show) ? "con" : "")}>
                <div className="fontsize">
                    <i className='iconfont icon-ziti'></i>
                    <Slider onAfterChange={onAfterChange} defaultValue={18} max={22} min={12} />
                </div>
                <div className="lineheight">
                    <div className='left'>
                        行高
                    </div>
                    <Slider onAfterChange={onAfterChangeline} defaultValue={3} max={5} min={1} />
                </div>
            </div>
            <div className="topreadbar">
                <div className="back" onClick={() => props.hidebooksdetail(props.nowbook, props.init, props.artindex)}><i className='iconfont icon-zuo'></i></div>
                <div className="topbarright">
                    {
                        props.flag ? <i className='iconfont icon-yijiarushujia'></i> : <i className='iconfont icon-jiarushujia' onClick={props.changeflag}></i>
                    }
                    <i className='iconfont icon-fenxiang' onClick={() => changeshare(true)}></i>
                </div>
            </div>
            <div className="bottomreadbar">
                <div className={"list " + (conindex === 0 ? "act" : "")} onClick={() => changeconindex(0)}>
                    <i className='iconfont icon-liebiao'></i>
                </div>
                <div className={"background " + (conindex === 1 ? "act" : "")} onClick={() => changeconindex(1)}>
                    <i className='iconfont icon-brightj2'></i>
                </div>
                <div className={"font " + (conindex === 2 ? "act" : "")} onClick={() => changeconindex(2)}>
                    <i className='iconfont icon-ziti'></i>
                </div>
            </div>

        </div>
    );
}
